<template>
    <div class="chart-container">
        <chart id="GraphEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
import {getNewEcharts} from '@/api/api'
import Chart from '@/components/Charts/index'
function roundDatas(num) {
     var datas = [];
     for (var i = 0; i < num; i++) {
         datas.push({
             name: 'circle' + i
         });
     }
     return datas;
 }

var options = {
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    roam: false, //鼠标缩放及平移
    focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
    dataRange: {
        min: 0,
        max: 60,
        y: '70%',
        calculable: true,
        show: true,
        color: ['#86D560', '#AF89D6', '#59ADF3', '#009DFF','#FF7D18'],
    },
    series: [{
        name: '',
        type: 'pie',
        startAngle: 0,
        hoverAnimation: false,
        radius: ['60%', '60%'],
        center: ['50%', '50%'],
        data: [{
            name: '公司A1',
            value: 10
        }, {
            name: '公司A2',
            value: 15
        }, {
            name: '公司A3',
            value: 20
        }, {
            name: '公司A4',
            value: 25
        }, {
            name: '公司A5',
            value: 30
        }, {
            name: '公司A6',
            value: 35
        }, {
            name: '公司A7',
            value: 40
        }, {
            name: '公司A8',
            value: 45
        }, {
            name: '公司A9',
            value: 50
        }, {
            name: '公司A10',
            value: 55
        }],
        itemStyle: {
            normal: {
                color: '#000',
                borderWidth: 5,
                borderColor: 'rgba(0,0,0,0)',
                label: {
                    show: true,
                    formatter: '{b}占比({d}%)',
                },
                labelLine: {
                    show: true,
                    length: 40,
                    lineStyle: {
                        color: '#7C9ECD'
                    }
                }
            }
        }
    }, {
        type: 'graph',
        tooltip: {},
        ribbonType: true,
        layout: 'circular',
        hoverAnimation: false,
        width: '60%',
        height: '60%',
        circular: {
            rotateLabel: true
        },
        symbolSize: 1,
        data: roundDatas(300),
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                color: '#58446C',
            },
            emphasis: {
                label: {
                    show: false,
                }
            }
        },
    }, {
        type: 'graph',
        tooltip: {},
        ribbonType: true,
        layout: 'circular',
        width: '60%',
        height: '60%',

        circular: {
            rotateLabel: true
        },
        symbolSize: 30,
        label: {
            normal: {
                position: 'center',
                formatter: '{b}数量{c}',
                normal: {
                    textStyle: {
                        fontFamily: '宋体'
                    }
                }
            }
        },

        edgeSymbol: ['circle'],
        edgeSymbolSize: [8, 10],
        edgeLabel: {
            normal: {
                textStyle: {
                    fontSize: 13,
                    fontWeight: 'bold',
                    fontFamily: '宋体'
                }
            }
        },

        itemStyle: {
            normal: {
                label: {
                    rotate: true,
                    show: false,
                    textStyle: {
                        color: '#9474B4',
                    }
                },
                borderColor: '#7C9ECD',
                borderWidth: 3,

            },
            emphasis: {
                label: {
                    show: false,
                }
            }
        },

        data: [{
            name: '公司A1',
            "symbolSize": 10,
            value: 10,
        }, {
            name: '公司A2',
            "symbolSize": 15,
            value: 15,
        }, {
            name: '公司A3',
            "symbolSize": 20,
            value: 20,
        }, {
            name: '公司A4',
            "symbolSize": 25,
            value: 25,
        }, {
            name: '公司A5',
            "symbolSize": 30,
            value: 30,
        }, {
            name: '公司A6',
            "symbolSize": 35,
            value: 35,
        }, {
            name: '公司A7',
            "symbolSize": 40,
            value: 40,
        }, {
            name: '公司A8',
            "symbolSize": 45,
            value: 45,
        }, {
            name: '公司A9',
            "symbolSize": 50,
            value: 50,
        }, {
            name: '公司A10',
            "symbolSize": 55,
            value: 55,
        }],
    }]
};
import echart from '@/mixins/echart'
export default {
    name: 'GraphEchart',
    mixins: [echart],
    created(){
        this.data.options = {...this.data.options,...options}
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"quan",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    const data = res.data.data;
                    let syData = []
                    data.sort(function(a,b){return a.value-b.value}).forEach((element,i) => {
                        syData.push({
                            name: element.name,
                            symbolSize: (i+1)*10,
                            value: element.value,
                        })
                    });
                    this.data.options.series[0].data = data
                    this.data.options.series[2].data = syData
                    this.data.options.dataRange.max = data.sort(function(a,b){return b.value-a.value})[0].value
                }
            })
        }
    }
}
</script>
